<!-- 宿舍列表页面-->
<template>
  <div>
    <!--    条件查询-->
    <el-form :model="searchForm" class="demo-form-inline">
      <el-row :gutter="20" align="middle">
        <el-col :span="5">
          <el-form-item label="楼栋名称" prop="address">
            <el-select v-model="searchForm.buildingId" placeholder="请选择楼栋" size="medium">
              <el-option v-for="item in buildingName" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="宿舍类型">
            <el-select v-model="searchForm.dormitoryType" placeholder="请选择宿舍类型" size="medium">
              <el-option label="女生宿舍" value="0"></el-option>
              <el-option label="男生宿舍" value="1"></el-option>
              <el-option label="混合宿舍" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="单元名称">
            <el-input v-model="searchForm.unitCode" placeholder="请输入单元名称" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="层数">
            <el-input v-model="searchForm.floor" placeholder="请输入楼层" size="medium"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" align="middle">
        <el-col :span="5">
          <el-form-item label="房间号">
            <el-input v-model="searchForm.roomNumber" placeholder="请输入房间号" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="床位数">
            <el-input v-model="searchForm.dormitoryBed" placeholder="请输入床位数" size="medium"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="宿舍状态" prop="status">
            <el-select v-model="searchForm.status" placeholder="请选择宿舍状态" size="medium">
              <el-option label="空闲" value="空闲"></el-option>
              <el-option label="正常" value="正常"></el-option>
              <el-option label="维修中" value="维修中"></el-option>
              <el-option label="暂停使用" value="暂停使用"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="margin-top:40px">
            <el-button size="medium" type="primary" @click="fetchData">搜索</el-button>
            <el-button size="medium" type="info" @click="handleReset">清除</el-button>
            <el-button size="medium" type="success" @click="showAddUnitModal">添加宿舍</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
        :visible.sync="isAddDormitoriesModalVisible"
        title="添加宿舍信息"
        width="50%">
      <AddDormitories @AddDormitories="hideDialog" @submit="handleAddDormitories"></AddDormitories>
    </el-dialog>

    <el-dialog
        :visible.sync="isUpdateDormitoriesModalVisible"
        title="修改宿舍信息"
        width="50%">
      <UpdateDormitories :message="message" @UpdateDormitories="hideDialog"
                         @submit="handleUpDateeDormitories"></UpdateDormitories>
    </el-dialog>

    <!--    展示宿舍列表-->
    <el-table :data="dormitoriesList" border stripe>
      <el-table-column v-if="false" align="center" label="宿舍ID" prop="dormitoryId"></el-table-column>
      <el-table-column align="center" label="楼栋名称" prop="buildingName"></el-table-column>
      <el-table-column align="center" label="宿舍类型" prop="dormitoryType">
        <template slot-scope="scope">
          {{ dormitoryTypeMap[scope.row.dormitoryType] }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单元名称" prop="unitCode"></el-table-column>
      <el-table-column align="center" label="楼层" prop="floor"></el-table-column>
      <el-table-column align="center" label="房间号" prop="roomNumber"></el-table-column>
      <el-table-column align="center" label="床位数" prop="dormitoryBed"></el-table-column>
      <el-table-column align="center" label="已分配" prop="assigned"></el-table-column>
      <el-table-column align="center" label="宿舍状态" prop="status"></el-table-column>
      <el-table-column align="center" label="操作" width="150vm">
        <template slot-scope="scope">
          <!--          <el-link style="margin-left: 10px;" type="success" @click="handleEdit(scope.row)"> 查看 </el-link>-->
          <el-link style="margin-left: 10px;" type="primary" @click="showUpdateDormitoriesModal(scope.row.dormitoryId)">
            编辑
          </el-link>
          <el-link style="margin-left: 10px;" type="danger" @click="confirmDelete(scope.row.dormitoryId)"> 删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分页器 -->
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import AddDormitories from '@/components/dormitories/AddDormitories.vue';
import UpdateDormitories from '@/components/dormitories/UpdateDormitories.vue';

export default {

  data() {
    return {
      message: '',
      isUpdateDormitoriesModalVisible: false,
      isAddDormitoriesModalVisible: false,
      // 条件查询的数据
      searchForm: {
        buildingId: '',//楼栋名称
        dormitoryType: '',//宿舍类型
        unitCode: '',//单元名称
        floor: '',//楼层
        roomNumber: "",//房间号
        dormitoryBed: '',//床位数
        assigned: '',//已分配
        status: ''//宿舍状态
      },
      dormitoriesList: [],//宿舍集合
      dormitoryTypeMap: {
        0: '女生宿舍',
        1: '男生宿舍',
        2: '混合宿舍'
      },
      buildingName: [],//楼栋集合
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  components: {
    AddDormitories,
    UpdateDormitories,
  },
  created() {
    this.fetchData();
    this.queryBuildingInformation();
  },
  methods: {
    // 查询楼栋信息
    queryBuildingInformation() {
      // 调用后端接口获取数据
      this.$axios.post('/api/buildings/list', {}, {headers: {'token': this.$store.getters.getToken}}).then(response => {
        // 请求成功后更新表格数据和分页信息
        if (response.data.code === 200) {
          // 使用 reduce 构建以 userId 为键，name 为值的对象
          this.buildingName = response.data.data.reduce((arr, user) => {
            // 将当前用户的 userId 作为键，name 作为值，添加到累积的数组中
            arr.push({value: user.buildingId, label: user.buildingName});
            return arr;
          }, []);
        } else {
          this.$message.error(response.data.msg || '查询楼栋信息失败');
        }
      }).catch(error => {
        this.$message.error(error || '查询楼栋信息失败');
      });
    },
    // 成功提示信息
    succeed(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },

    // 提示是否删除
    confirmDelete(dormitoriesId) {
      // 弹出确认提示框
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定按钮后执行删除操作
        this.deleteDormitories(dormitoriesId);
      }).catch(() => {
        // 用户点击取消按钮，不执行任何操作
      });
    },
    hideDialog() {
      this.isAddDormitoriesModalVisible = false;
      this.isUpdateDormitoriesModalVisible = false;
      // 调用搜索方法，重新加载数据
      this.fetchData();
    },
    showAddUnitModal() {
      this.isAddDormitoriesModalVisible = true;
    },
    handleAddDormitories() {
      // 处理添加单元信息成功后的逻辑
      // 关闭模态框等操作
      this.isAddDormitoriesModalVisible = false;
    },

    showUpdateDormitoriesModal(dormitoriesId) {
      this.message = dormitoriesId;
      this.isUpdateDormitoriesModalVisible = true;
    },
    handleUpDateeDormitories() {
      // 处理添加楼栋信息成功后的逻辑
      // 关闭模态框等操作
      this.isUpdateDormitoriesModalVisible = false;
    },

    // 清除搜索条件
    handleReset() {
      // 清空搜索条件对象
      this.searchForm.buildingId = '';//楼栋名称
      this.searchForm.dormitoryType = '';//宿舍类型
      this.searchForm.unitCode = '';//单元名称
      this.searchForm.floor = '';//楼层
      this.searchForm.roomNumber = '';//房间号
      this.searchForm.dormitoryBed = '';//床位数
      this.searchForm.status = '';//宿舍状态
      // 调用搜索方法，重新加载数据
      this.fetchData();
    },

    // 查询宿舍信息
    fetchData() {
      // 调用后端接口获取数据
      this.$axios.post('/api/dormitories/selectDormitoryDTOByPage?pageNum=' + this.currentPage + '&pageSize=' + this.pageSize, {
        buildingId: this.searchForm.buildingId,//楼栋名称
        dormitoryType: this.searchForm.dormitoryType,//宿舍类型
        unitCode: this.searchForm.unitCode,//单元名称
        floor: this.searchForm.floor,//楼层
        roomNumber: this.searchForm.roomNumber,//房间号
        dormitoryBed: this.searchForm.dormitoryBed,//床位数
        status: this.searchForm.status//宿舍状态
      }, {headers: {'token': this.$store.getters.getToken}}).then(response => {
        // 请求成功后更新表格数据和分页信息
        if (response.data.code === 200) {
          this.dormitoriesList = response.data.data.list;
          this.total = response.data.data.total;
          // 请求成功，处理响应
          this.succeed("查询成功");
        } else {
          this.$message.error(response.data.msg || '获取单元信息失败');
        }
      }).catch(error => {
        this.$message.error(error || '获取单元信息失败');
      });
    },
    handleSizeChange(size) {
      // 每页条数变更
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      // 当前页码变更
      this.currentPage = page;
      this.fetchData();
    },
    deleteDormitories(dormitoriesId) {
      // 发送DELETE请求
      this.$axios.delete(`/api/dormitories/delete/${dormitoriesId}`)
          .then(response => {
            if (response.data.code === 200) {
              // 请求成功，处理响应
              this.succeed("删除成功");
              // 在这里可以根据需要执行一些操作，比如更新界面等
              this.fetchData();
            } else {
              this.$message.error(response.data.msg || '删除信息失败');
            }
          })
          .catch(error => {
            // 请求失败，处理错误
            this.$message.error(error || '删除信息失败');
          });
    },
  }
};
</script>


